<template>
	<view>
		<view class="containner" :style="{backgroundImage:'url('+ bgImg1 +')'}">
			<view class="qrcodeContent">
				<image :src="canvasUrl" mode="widthFix"></image>
			</view>
			<view class="btn">
				<button class="shareBtn" open-type="share">立即分享给好友</button>
			</view>
		</view>
		<mosowe-canvas-image ref="mosoweCanvasComponents" @canvasImage="_canvasImage" :lists="lists" height="487"
			width="338" :showPreview='false' />
		<!-- 分享 -->
		<uni-popup ref="share" type="share" safeArea backgroundColor="#fff">
			<uni-popup-share title="分享到" @select="selectItem"></uni-popup-share>
		</uni-popup>
	</view>
</template>
<script>
	import mosoweCanvasImage from '@/components/mosowe-canvas-image/mosowe-canvas-image.vue'

	import config from '@/config/config.js'
	import {
		getUserInfo
	} from '@/api/user.js'
	export default {
		components: {
			mosoweCanvasImage
		},
		data() {
			return {
				canvasUrl: '',
				bgImg1: config.baseUrl + '/uploads/images/4EhagZwZ6wcqkYpKGjGfQ5JFyVC4gj8hlh6VQrmV.png',
				bgImg2: config.baseUrl + '/uploads/images/EeR7YemYH5d3SkPqANU3J2GvC49LQaVAOAttrrPj.png',
				uid: 0,
				lists: [{
						type: 'image',
						// content: config.baseUrl + '/uploads/images/GeLrYxn4iRubBE5RuyTFz6tqFVbAcJrApKEXfm42.png',
						content: config.baseUrl + '/uploads/images/x5Qz16JTmHfJOOwHQdT1YmnMV4dTZkULQ1Gxe6KJ.png',
						width: 338,
						height: 487,
						x: 0,
						y: 0,
					},
					{
						type: 'qr',
						content: 'https://gzjakj.cn/qrcode?pid=' + this.uid,
						width: 187,
						height: 187,
						x: 75,
						y: 55,
					},
					{
						type: 'text',
						content: '个人独立推广二维码',
						width: 340,
						height: 80,
						color: '#2AC092',
						align: 'center',
						size: 18,
						x: 160,
						y: 290,
					},
					{
						type: 'rect',
						content: '',
						width: 340,
						height: 1,
						color: '#009A74',
						x: 0,
						y: 340,
					},
					{
						type: 'text',
						content: '邀请好友即可绑定关系',
						width: 340,
						height: 80,
						align: 'center',
						color: '#1A1A1A',
						x: 160,
						y: 420,
					}
				],
			}
		},
		mounted() {
			// this.beginCanvas()
			this.init()
		},
		// 分享
		onShareAppMessage() {
			return {
			    title: '',
			    path: '',
				imageUrl: this.canvasUrl,
			}
		},
		// 分享到朋友圈
		onShareTimeline(){
			return {
				title: '',
				query: '',
				imageUrl: this.canvasUrl,
			}
		},
		methods: {
			init() {
				let that = this
				getUserInfo().then(res => {
					// console.log(999,res.data.data);
					that.uid = res.data.data.id
					that.beginCanvas()
				})
			},
			beginCanvas() {
				this.$refs.mosoweCanvasComponents.createCanvas();
			},
			_canvasImage(e) {
				this.canvasUrl = e;
				// this.save(e);
				// uni.redirectTo({
				// 	url: `/pages/index/invite`
				// });
			},
			saveHttpImg(url) {
				let _t = this;
				uni.downloadFile({
					url: _t.canvasUrl,
					success: (res) => {
						if (res.statusCode === 200) {
							let file = res.tempFilePath;
							_t.save(file)
						}
					}
				});
			},
			save(url) {
				let _this = this;
				uni.saveImageToPhotosAlbum({
					filePath: url,
					success: () => {
						uni.hideLoading();
						uni.showToast({
							title: "图片已保存"
						});
					},
					fail: () => {
						uni.hideLoading();
						uni.showToast({
							title: "图片保存失败"
						});
					}
				});
			},
			shareToggle() {
				this.$refs.share.open()
			},
			selectItem(e){
				if(e.item.name == 'save'){
					this.save(this.canvasUrl)
				}
				if(e.item.name == 'wx'){
					// onShareAppMessage()
				}
				if(e.item.name == 'pyq'){

				}
			}
		},
	}
</script>
<style lang="scss" scoped>
	.containner {
		min-height: 100vh;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		overflow: hidden;

		.qrcodeContent {
			width: 624upx;
			height: 884upx;
			margin: 100upx auto 0;
			background-size: 100% 100%;
			background-repeat: no-repeat;
			overflow: hidden;
			border-radius: 20upx;

			>image {
				width: 100%;
				height: 100%;
			}

			.qrcode {
				width: 374upx;
				height: 374upx;
				margin: 100upx 135upx 60upx;
				overflow: hidden;
			}
		}

		.btn {
			margin: 40upx 70upx 0;

			.shareBtn {
				height: 96upx;
				background: #2AC092;
				box-shadow: 0px 8upx 20upx 0px rgba(0, 154, 116, 0.35);
				border-radius: 48upx;
				color: #fff;
				font-size: 36upx;
			}
		}
	}

	.content {
		display: flex;
		flex-direction: column;

	}

	.shareView {

		margin-top: 60upx;
		width: 100upx;
		height: 40upx;
		line-height: 40upx;
		text-align: center;
		background-color: antiquewhite;

		align-self: center;
	}
</style>